<template>
    <div class="app-container flex-container">
        <div class="left">
            <Tree @change="deptChange"></Tree>
        </div>
        <div class="right">
            <el-row :gutter="20" style="margin-bottom: 20px;margin-right: 0;">
                <el-col :span="6">
                    <el-input v-model="req._name_" type="text" placeholder="请输入名称" @change="getList"></el-input>
                </el-col>
                <el-col :span="6">
                    <el-select v-model="req.status" style="width: 100%" placeholder="请选择状态">
                        <el-option label="在线" value="1"></el-option>
                        <el-option label="离线" value="0"></el-option>
                    </el-select>
                </el-col>
                <el-col :span="6">
                    <el-button type="primary" @click="add">新增</el-button>
                </el-col>
            </el-row>
            <el-table :data="tableData" style="width: 100%">
                <el-table-column type="index" label="序号" width="60" align="center" show-overflow-tooltip>
                    <template slot-scope="{$index}">
                        {{ $index + 1 + (req.page - 1) * req.pageSize }}
                    </template>
                </el-table-column>
                <el-table-column prop="code" label="设备编号" min-width="120" align="left" show-overflow-tooltip></el-table-column>
                <el-table-column prop="name" label="名称" min-width="120" align="left"   show-overflow-tooltip></el-table-column>
                <el-table-column prop="groupName" label="部门" min-width="120" align="left"   show-overflow-tooltip></el-table-column>
                <el-table-column prop="onlineStatus" label="在线状态" width="100" align="center">
                    <template slot-scope="{row}">
                        {{ row.onlineStatus == 1 ? '在线' : '离线' }}
                    </template>
                </el-table-column>
                <el-table-column prop="location" label="经纬度" align="center"></el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="{ row }">
                        <el-button @click="edit(row)" type="text" size="small">编辑</el-button>
                        <el-button @click="unbind(row)" type="text" size="small">解绑</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <Pagination v-show="total" :total="total" :page.sync="req.page" :limit.sync="req.pageSize" @pagination="getList"></Pagination>
        </div>

        <Bind :show.sync="showBind" :group="group" :item="currentItem" @confirm="getList"></Bind>

        <Edit :show.sync="showEdit" :item="currentItem" @confirm="getList"></Edit>
    </div>
</template>
<script>
import Bind from './components/bind.vue'
import Edit from './components/edit.vue'
import {groupTree} from "@/api/user";
import {getList, remove} from '@/api/device';

export default {
    name: "index",
    components: {Bind, Edit},
    data() {
        return {
            tableData: [],
            total: 0,
            req: {
                typeKey: 4,
                page: 1,
                pageSize: 20
            },
            deptTree: [],
            group: null,
            showBind: false,
            showEdit: false,
            currentItem: {},
        }
    },
    mounted() {
        groupTree().then(res => {
            this.deptTree = res.data;
        })
        this.getList()
    },
    methods: {
        deptChange(e) {
            this.group = {
                groupId: e.groupId,
                groupPath: e.groupPath,
                groupName: e.groupName
            }
            this.req.groupPath = e.groupPath;
            this.getList()
        },
        async getList() {
            try {
                const res = await getList(this.req);
                this.tableData = res.data;
                this.total = res.total;
            } catch (e) {

            }
        },
        add() {
            if (!this.group) {
                return this.$message.warning('请先选择一个部门')
            }
            this.showBind = true;
        },
        edit(row) {
            this.currentItem = structuredClone(row);
            this.showEdit = true;
        },
        unbind(row) {
            this.$modal.confirm('是否确认解绑此设备').then(res => {
                return remove({id: row.id})
            }).then(res => {
                this.$modal.msgSuccess('操作成功！')
                this.getList()
            })
        }
    }
}
</script>


<style scoped lang="scss">

</style>
